<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Registration</title>
    </h:head>
    <h:body>
        <p:growl id="growl" autoUpdate="true" showDetail="true"/>       

        <div class="container">
            <h:form id="signup" >
                <div class="header">
                    <h3>Sign Up</h3>
                    <p>Please, fill out this form</p>
                </div>
                <div class="sep" />
                <div class="inputs">           
                    <p:inputText id="name" value="#{registrationBean.user.name}"
                                 placeholder="Name" type="name">
                        <p:ajax update="namemsg"/>
                    </p:inputText>
                    <p:message id="namemsg" for="name" />

                    <p:inputText id="email" value="#{registrationBean.user.mail}" 
                                 placeholder="Email" type="email">
                        <p:ajax update="emailmsg"/>
                    </p:inputText>
                    <p:message id="emailmsg" for="email" />

                    <p:password id="password" value="#{registrationBean.user.psw}"
                                feedback="true" match="pwd2" label="Password" 
                                placeholder="Password"/>
                    <p:message for="password" />

                    <p:password id="pwd2" label="Confirm Password" 
                                placeholder="Confirm Password"/>

                    <p:commandButton id="submit" value="SIGN UP" type="submit"
                                     action="#{registrationBean.register()}" />

                </div>          
            </h:form>
        </div>

        <style type="text/css">
            body{
                background-image: 
                    url(http://kreativo.se/backlogin.jpg);
                font-family: "Helvetica Neue",Helvetica,Arial;
                padding-top: 20px;
            }

            .container{
                width: 406px;
                max-width: 406px;
                margin: 0 auto;
            }

            #signup{
                padding: 0px 25px 25px;
                background: #fff;
                box-shadow: 0px 0px 0ox 5px rgba(
                    255,255,255,0.4),
                    0px 4px 20px rgba(0,0,0,0.33);
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                display:table;
                position:static;
            }

            #signup .header{
                margin-bottom: 20px;
            }

            #signup .header h3{
                color: #333333;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 5px;
            }

            #signup .header p {
                color: #8f8f8f;
                font-size: 14px;
                font-weight: 300;
            }

            #signup .sep {
                height: 1px;
                background: #e8e8e8;
                width: 406px;
                margin: 0px -25px;
            }

            #signup .inputs {
                margin-top: 25px;
            }

            #signup .inputs label {
                color: #8f8f8f;
                font-size: 12px;
                font-weight: 300;
                letter-spacing: 1px;
                margin-bottom: 7px;
                display: block;
            }

            input::-webkit-input-placeholder {
                color:    #b5b5b5;
            }

            input:-moz-placeholder {
                color:    #b5b5b5;
            }

            #signup .inputs input[type=email], input[type=password], input[type=name] {
                background: #f5f5f5;
                font-size: 0.8rem;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                border: none;
                padding: 13px 10px;
                width: 330px;
                margin-bottom: 20px;
                box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
                clear: both;
            }
            
            #signup .inputs input[type=email]:focus, input[type=password]:focus, input[type=name]:focus {
                background: #fff;
                box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
                outline: none;   
            }
            
            #signup .inputs button[type=submit] {
                width: 100%;
                margin-top: 20px;
                padding: 15px 0;
                color: #fff;
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 1px;
                text-align: center;
                text-decoration: none;
                background: -moz-linear-gradient(
                    top,
                    #b9c5dd 0%,
                    #a4b0cb);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#b9c5dd),
                    to(#a4b0cb));
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                border: 1px solid #737b8d;
                -moz-box-shadow:
                    0px 5px 5px rgba(000,000,000,0.1),
                    inset 0px 1px 0px rgba(255,255,255,0.5);
                -webkit-box-shadow:
                    0px 5px 5px rgba(000,000,000,0.1),
                    inset 0px 1px 0px rgba(255,255,255,0.5);
                box-shadow:
                    0px 5px 5px rgba(000,000,000,0.1),
                    inset 0px 1px 0px rgba(255,255,255,0.5);
                text-shadow:
                    0px 1px 3px rgba(000,000,000,0.3),
                    0px 0px 0px rgba(255,255,255,0);
                display: table;
                position: static;
                clear: both;
            }

            #signup .inputs button[type=submit]:hover {
                background: -moz-linear-gradient(
                    top,
                    #a4b0cb 0%,
                    #b9c5dd);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#a4b0cb),
                    to(#b9c5dd));
            }

        </style>
    </h:body>
</html>
